<script setup lang="ts">
//相关推荐快
import Down from "@/assets/down.svg";
import Img from "@/components/block/img.vue";
import Images from "@/components/block/images.vue";
import { SingleMeat } from "@/store/interface";

export interface Props {
  data: SingleMeat[];
  type?: boolean;
}
withDefaults(defineProps<Props>(), {
  type: false,
});
//defineProps<{ data: SearchContent[]; type?: boolean }>();
//type为true，则为双栏
//备用数据
</script>

<template>
  <section class="common-normal-box" :class="type && 'vertical'">
    <header v-show="!type">
      <h5>精选文章</h5>
      <a href="#" class="right-operation" v-show="false">
        <button class="floor-btn">
          前往论坛 <Img :img="Down" :rotate="270" />
        </button>
      </a>
    </header>
    <aside class="common-flex-box">
      <article class="article-card" v-for="item in data" :key="item.id">
        <a :href="item.link">
          <figure class="item-cover">
            <Images :img="item.featured_image" />
          </figure>
          <h3>{{ item.title }}</h3>
          <p class="desc">{{ item.description }}</p>
          <p class="read">阅读全文 > </p>
        </a>
      </article>
    </aside>
  </section>
</template>

<style scoped lang="less">
.common-normal-box {
  header {
    .right-operation {
      position: absolute;
      right: 10px;
      top: 0;
      height: 60px;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
    }
  }
  //.common-flex-box {
  //  display: -webkit-box;
  //  display: -ms-flexbox;
  //  display: flex;
  //  flex-direction: row;
  //
  //  justify-content: space-between;
  //}
}

.floor-btn {
  height: 37px;
  line-height: 34px;
  font-weight: 700;
  border: 1px solid #dcdcdc;
  padding: 0 15px;
  border: 1px solid #e1e1e1;
  color: #666;
  font-size: 14px;
  border-radius: 4px;
  background: #fafafa;
  background-image: -webkit-gradient(
    linear,
    left top,
    left bottom,
    from(#fff),
    to(#fafafa)
  );
  background-image: linear-gradient(180deg, #fff, #fafafa);
  img {
    width: auto;
  }
}

.article-card:hover {
  -webkit-box-shadow: inset 0 0 38px rgba(0, 0, 0, 0.08);
  box-shadow: inset 0 0 38px rgba(0, 0, 0, 0.08);
}

.article-card {
  position: relative;
  min-width: 25%;
  border-right: 1px solid rgba(0, 0, 0, 0.1);
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  padding: 30px 30px 60px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  cursor: pointer;
  .item-cover {
    margin: 0;
    position: relative;
    width: 244px;
    height: 154px;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    overflow: hidden;
    img {
      width: 100%;
      position: absolute;
      top: 50%;
      left: 50%;
      -webkit-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
    }
  }
  h3 {
    margin: 30px 0 12px;
    color: #333;
    width: 100%;
    font-size: 15px;
    line-height: 1;
    font-weight: 700;
    -webkit-line-clamp: 1;
  }
  .desc,
  h3 {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
  }
  .desc {
    -webkit-line-clamp: 3;
    font-size: 12px;
    color: #999;
    font-weight: 400;
    line-height: 18px;
  }
  .read {
    display: inline-block;
    position: absolute;
    bottom: 30px;
    margin-top: 12px;
    font-size: 12px;
    font-weight: 500;
    color: #5079d9;
  }
}

@media (max-width: 1024px) {
  .common-normal-box {
    .common-flex-box {
      flex-direction: column;
    }
  }
}

/**
* 移除底部线条
*/
.common-normal-box .common-flex-box .article-card {
  border-bottom: 0px;
}
//默认为横

//修改状态为竖
.common-normal-box.vertical .common-flex-box {
  display: flex;
  flex-wrap: wrap;
  .article-card {
    min-width: 50%;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    .item-cover {
      width: auto;
    }
  }

  //去除偶数右边框
  .article-card:nth-child(even) {
    border-right: none;
  }
  //去除倒数第一、第二底边框
  .article-card:nth-last-child(1),
  .article-card:nth-last-child(2) {
    border-bottom: none;
  }
}
</style>
